<template>
<div class="cart">
   <div class="product">
      <template v-for="item in productList" :key="item._id">
         <div class="product__item" v-if="item.count > 0">
            <img class="product__item__img" :src="item.imgUrl" alt="item.name" v-show="item.imgUrl">
            <div class="product__item__detail">
               <h4 class="product__item__title">{{ item.name }}</h4>
               <p class="product__item__price">
                  <span class="product__item__yen">&yen;</span>{{ item.price }}
                  <span class="product__item__origin">&yen;{{ item.oldPrice }}</span>
               </p>
            </div>
            <div class="product__number">
               <span 
                  @click="()=>{chageCartItemInfo(shopId, item._id, item, -1)}"
                  class="product__number__minus">-</span>
                {{item.count}}
               <span 
                  @click="()=>{chageCartItemInfo(shopId, item._id, item, 1)}"
                  class="product__number__add"
                  >+</span>
            </div>
         </div>
      </template>
   </div>
   <div class="check">
      <div class="check__icon">
         <img class="check__icon__img" src="http://www.dell-lee.com/imgs/vue3/basket.png" alt="img" />
         <div class="check__icon__tag">{{total}}</div>
      </div>
      <div class="check__info">
         总计：<span class="check__info__price">&yen;{{price}}</span>
      </div>
      <div class="check__btn">去结算</div>
   </div>
</div>
    
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { useCommonCartEffect } from './commontCartEffect'

//获取购物车信息
const useCartEffect = ()=>{
      const store = useStore()
      const route = useRoute()
      const shopId = route.params.id
      const cartList = store.state.cartList
      const total = computed(()=>{
         const productList = cartList[shopId]
         let count = 0
         if(productList) {
            for(let i in productList) {
               const product = productList[i]
               count+=product.count
            }
         }
         return count
      })

      const price = computed(()=>{
         const productList = cartList[shopId]
         let count = 0
         if(productList) {
            for(let i in productList) {
               const product = productList[i]
               count+=(product.count * product.price)
            }
         }
      
         return count.toFixed(2)
      })

      const productList = computed(()=>{
         const productList = cartList[shopId] || []
         return productList
      })

      return { total, price, productList }
}

export default {
    name: 'Cart',
    setup() {
       const route = useRoute();
       const shopId = route.params.id
       const { chageCartItemInfo } = useCommonCartEffect()
       const { price, total, productList } = useCartEffect()
       return { price, total, productList, chageCartItemInfo, shopId }
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixmins.scss';
.cart{
   position:absolute;
   bottom: 0;
   left: 0;
   width: 100%;
}

.product{
   flex: 1;
   overflow-y: auto;
   background: #fff;
   &__item{
       position: relative;
       display: flex;
       padding: .12rem 0;
       margin: 0 .16rem;
       border-bottom: 1px solid $content-bgColor;
       &__img{
           width: .46rem;
           height: .46rem;
           margin-right: .16rem;
       }
       &__detail {
           overflow: hidden;
       }
       &__title {
           margin: 0;
           line-height: .2rem;
           font-size: .14rem;
           color: $content-fontcolor;
           @include ellipsis;
       }
       &__price{
           margin: 0.06 0 0 0;
           line-height: .2rem;
           font-size: .14rem;
           color: $hightlight-fontColor;
       }
       &__yen{
           font-size: .12rem;
       }
       &__origin{
           margin-left: .16rem;
          line-height: .2rem;
           font-size: .12rem;
           color: $light-fontcolor;
           text-decoration: line-through;
       }
       .product__number{
           position: absolute;
           right: 0;
           bottom: .12rem;
           &__minus,
           &__add
           {
               display: inline-block;
               width: .2rem;
               height: .2rem;
               border-radius: 50%;
               line-height: .16rem;
               font-size: .2rem;
               text-align: center;
           }
            &__minus{
                border:0.01rem solid $medium-fontcolor;
                color: $medium-fontcolor;
                margin-right: 0.05rem;
            }
            &__add{
                margin-left: 0.05rem;
                background: $btn-bgColor;
                color: $bgColor;
            }
       }
   }
}

.check{
   display: flex;
   height: .49rem;
   box-sizing: border-box;
   border-top: 0.01rem solid $content-bgColor;
   line-height: .49rem;
   &__icon{
      position: relative;
      width: .84rem;
      &__img{
         display: block;
         margin: .12rem auto;
         width: .28rem;
         height: .26rem;
      }
      &__tag{
         position: absolute;
         top: .04rem;
         left: .46rem;
         padding: 0 0.04rem;
         min-width: .2em;
         height: .2rem;
         line-height: .2rem;
         background: $hightlight-fontColor;
         border-radius: .1rem;
         font-size: .12rem;
         text-align: center;
         color: $bgColor;
         transform: scale(.8);
         transform-origin: left center;
      }
   }
   &__info {
       flex: 1;
       color: $content-fontcolor;
       font-size: .12rem;
      &__price{
         color: $hightlight-fontColor;
         font-size: .18rem;
      }
   }
   &__btn{
      width: .98rem;
      color: $bgColor;
      font-size: .14rem;
      text-align: center;
      background: #4fb0f9;
   }
}

</style>